<template>
  <Layout>
    <PageHeaderNew :items="items"></PageHeaderNew>
    <div class="row">
      <div class="col-md-12">
        <div class="card">
          <div class="card-body">
            <div class="table-responsive">
              <b-table
                class="table-centered"
                :items="ordersData"
                :fields="fields"
                responsive="sm"
                :per-page="perPage"
                :current-page="1"
                thead-class="thead-light"
              >
                <template v-slot:cell(viewDetail)>
                  <div @click="toDetail" class="pointer" style="color: #5664d2;">配置</div>
                </template>
              </b-table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </Layout>
</template>
<script>
import Layout from "../../layouts/main";
import PageHeaderNew from "@/components/page-header-new";
export default {
  components: {
    Layout,
    PageHeaderNew,
  },
  data () {
    return {
      items: [
        {
          text: "用户管理",
          url: "/user",
        },{
          text: "角色管理",
          url: "",
        }
      ],
      ordersData: [
        {
          serialNum: "1",
          roleName: "开发者1",
          jurisdiction: "爬虫开发,标签开发",
        },{
          serialNum: "2",
          roleName: "开发者2",
          jurisdiction: "爬虫开发,标签开发,日志查看",
        },{
          serialNum: "3",
          roleName: "管理员",
          jurisdiction: "爬虫开发,标签开发,日志查看,用户管理",
        }
      ],
      perPage: 10,
      fields: [
        { key: "serialNum", label: "序号" },
        { key: "roleName",  label: "角色名称" },
        { key: "jurisdiction",  label: "权限摘要" },
        { key: "viewDetail",  label: "角色详情" },
      ],
    }
  },
  methods: {
    addUser(){
      this.$router.push("/user/addUser")
    },
    userCenter(){
      this.$router.push("/user/userCenter")
    },
    toDetail(){
      this.$router.push("/user/roleDetail")
    },
  }
}
</script>
<style lang="scss" scoped>
.butn{
  ::v-deep .btn{
    background-color: #252b3b;
    border-color: #252b3b;
    border-radius: 30px;
    display: flex;
    align-items: center;
  }
  ::v-deep .btn-secondary.focus {
    box-shadow: 0 0 0 0.15rem rgb(37 40 58 / 50%);
  }
}
</style>
